<template>
  <div ref="root">
    <fullscreen
      v-model:fullscreen="fullscreen"
      :teleport="teleport"
      :page-only="pageOnly"
    ></fullscreen>
    <div style="height: 100%" class="fullscreen-wrapper" :class="fullscreen ? 'back' : ''">
      <slot name="content"></slot>
      <a href="javascript:;">
        <img
          src="@/assets/enlarge.svg"
          alt=""
          @click="toggleApi"
          style="width: 18px; height: 18px; position: absolute; right: 40px; top: 20px"
          :style="{ right: `${right}px`, top: `${top}px` }"
          v-if="!flag"
        />
        <img
          src="@/assets/del.svg"
          alt=""
          @click="toggleApi"
          style="width: 18px; height: 18px; position: absolute; right: 40px; top: 20px"
          :style="{ right: `${right}px`, top: `${top}px` }"
          v-else
        />
      </a>
    </div>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent, toRefs, watch } from 'vue';
import { api as fullscreen } from 'vue-fullscreen';
export default defineComponent({
  props: {
    height: {
      type: Number,
      default: 300,
    },
    right: {
      type: Number,
      default: 40,
    },
    top: {
      type: Number,
      default: 20,
    },
  },
  setup(props, context) {
    const root = ref();
    const flag = ref<boolean>(false);
    const state = ref<any>({
      fullscreen: true,
      teleport: true,
      pageOnly: false,
    });
    //记录chart原始高度
    const newHeight = ref<any>('');
    function toggle() {
      state.value.fullscreen = !state.value.fullscreen;
    }
    async function toggleApi() {
      context.emit('handleHeight', document.documentElement.clientHeight);
      fullscreen.toggle(root.value.querySelector('.fullscreen-wrapper'), {
        // teleport: state.teleport,
        callback: isFullscreen => {
          state.value.fullscreen = isFullscreen;
          flag.value = isFullscreen;
          if (!isFullscreen) {
            context.emit('handleHeight', newHeight.value);
          }
        },
      });
    }
    watch(
      () => props.height,
      (value, newValue) => {
        if (!newValue) {
          newHeight.value = props.height;
        }
      },
      {
        deep: true,
        immediate: true,
      },
    );
    return {
      root,
      ...toRefs(state),
      toggle,
      toggleApi,
      newHeight,
      flag,
    };
  },
});
</script>
<style lang="less" scoped>
.back {
  position: relative;
  z-index: 999999;
}
</style>
